<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="报警煤矿列表"
      back-icon-color="#fff"
      title-color="#fff"
    />
    <div class="content">
      <div class="minesInf-input">
        <u-input
          style="padding: 0 15rpx 0"
          v-model="searchLabel"
          placeholder="请选择"
          type="select"
          @click="showAlarmType = true"
          :select-open="showAlarmType"
        />
      </div>

      <div>
        <div class="mine-num">
          煤矿数量
          <span class="mine-num-val">{{ page.total }}</span>
        </div>
      </div>
    </div>
    <scroll-view
      :scroll-y="true"
      class="u-flex-1 of-hide"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
      style="height: 200px;"
    >
      <div
        v-for="item of minesList"
        :key="item.customerNo"
        class="cardItem"
        @click="toDetails(item)"
      >
        <div v-if="item.produceState" class="content-item-border"></div>

        <div class="cardHead">
          <div class="cardHead-item">{{ item.produceStateStr }}</div>
        </div>
        <div class="cardBody-item">
          <div class="cardBody-item-title">
            <div style="color: black; font-weight: 500; font-size: 30rpx">
              {{ item.customerName }}
            </div>
            <div style="font-size: 25rpx; margin: 0 0 5rpx 10rpx">
              {{ item.countyName }}
            </div>
          </div>
          <div class="cardBody-item-alarmName">
            <div class="alarmName-border"></div>
            <div
              v-for="(item1, index) of item.alarmType"
              :key="item1 + index"
              class="cardBody-item-alarmName-item"
            >
              {{
                alarmTypeList.find((val) => (val.id == item1 ? val : "")).label
              }}
            </div>
          </div>
        </div>
      </div>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty
            text="抱歉，暂无相关数据~"
            :src="require('@/static/image/empty.png')"
          ></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <u-picker
      mode="selector"
      v-model="showAlarmType"
      :range="alarmTypeList"
      @confirm="alarmTypeConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alarmTypeList: [],
      searchLabel: "",
      showAlarmType: false,
      alarmCounts: 0,
      countyNo: "",
      minesList: [],
      triggered: false,
      status: "loading",
      showEmpty: true,
      alarmTypeId: 0,
      page: {
        pageSize: 30,
        pageNumber: 1,
        total: 0,
      },
    };
  },
  onLoad(option) {
    this.getAlarmTypesLabel();
    this.countyNo = option.countyNo;
    this.getAlarmList(option.id);
    this.searchLabel = option.label;
    this.alarmTypeId = option.id;
  },
  methods: {
    // 获取报警类型
    getAlarmTypesLabel() {
      this.$get("/alarm/recording/getAlarmTypesLabel").then((res) => {
        this.alarmTypeList = res.body;
      });
    },
    alarmTypeConfirm(e) {
      this.searchLabel = this.alarmTypeList[e[0]].label;
      this.getAlarmList(this.alarmTypeList[e[0]].id);
      this.alarmTypeId = this.alarmTypeList[e[0]].id;
    },

    //获取报警煤矿列表
    async getAlarmList(id) {
      let params = {
        pageSize: this.page.pageSize,
        pageNumber: this.page.pageNumber,
        alarmType: id,
        // countyNo: this.countyNo,
      };
      const { content, total } = await (
        await this.$post("/cjt/app/alarm/customerList", params)
      ).body;

      if (content) {
        this.minesList =
          this.page.pageNumber == 1 ? content : this.minesList.concat(content);
        // 到底了
        if (content.length < this.page.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (
          this.page.pageNumber == 1 &&
          this.minesList &&
          this.minesList.length === 0
        ) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }
        this.page.total = total;
      }
      this.minesList.forEach((val) => {
        val.alarmType = val.alarmType.split(",");
      });
    },
    toDetails(item) {
      item.countyNo = this.countyNo;
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/detail?item=${JSON.stringify(
          item
        )}`,
      });
    },
    init() {
      this.page.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getAlarmList(this.alarmTypeId);
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status === "loading") {
        this.page.pageNumber++;
        this.getAlarmList(this.alarmTypeId);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  // padding: 0 22rpx;
  overflow: auto;
  background: #fff;
}

.content {
  margin: 0 22rpx;
  // background-color: white;

  .minesInf-input {
    margin: 20rpx 0;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
  }

  .mine-num {
    background-color: white;
    text-align: center;
    height: 66px;
    background: #fff;
    line-height: 60px;
    color: #fff;
    background: url("/static/image/cjt/cjnxzc.png");
    background-size: 100% 100%;

    .mine-num-val {
      font-size: 30px;
      margin-left: 10px;
      position: relative;
      top: 2px;
    }
  }
}
.cardItem {
  background: #fff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  padding: 28rpx 0 20rpx;
  margin: 15rpx 20rpx;
  border-radius: 10rpx;
  position: relative;
  .content-item-border {
    position: absolute;
    background: #4bc28c;
    width: 10rpx;
    height: 60rpx;
    left: -10rpx;
    top: 20rpx;
    border-radius: 30rpx 0rpx 0 30rpx;
  }
}
.cardHead {
  position: relative;
  margin-bottom: 50rpx;

  .cardHead-item {
    background-color: #4bc28c;
    color: white;
    position: absolute;
    left: -2rpx;
    top: -9rpx;
    width: 150rpx;
    display: flex;
    justify-content: center;
    padding: 10rpx 0;
    font-size: 25rpx;
    box-sizing: border-box;
    border-radius: 0 10rpx 10rpx 0;
  }
}

.cardBody-item {
  padding: 0 20rpx 20rpx;

  .cardBody-item-title {
    display: flex;
    align-items: end;
    margin-bottom: 10rpx;
  }

  .cardBody-item-alarmName {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;

    .cardBody-item-alarmName-item {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 10rpx 0;
      width: 48.5%;
      display: flex;
      justify-content: center;
      margin-bottom: 10rpx;
      border-radius: 10rpx;
      font-size: 25rpx;
    }

    .alarmName-border {
      position: absolute;
      // background-color: #4BC28C;
      width: 20rpx;
      height: 70rpx;
      left: -40rpx;
      top: -100rpx;
      z-index: 10;
    }
  }
}
</style>
